import { DocSectionText } from '@/components/doc/common/docsectiontext';

export function StyledDoc(props) {
    return (
        <>
            <DocSectionText {...props}>
                <p>List of class names used in the styled mode.</p>
            </DocSectionText>
            <div className="doc-tablewrapper">
                <table className="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-splitter</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-splitter</td>
                            <td>Container element during resize.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-horizontal</td>
                            <td>Container element with horizontal layout.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-vertical</td>
                            <td>Container element with vertical layout.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-panel</td>
                            <td>Splitter panel element.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-gutter</td>
                            <td>Gutter element to use when resizing the panels.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-gutter-handle</td>
                            <td>Handl element of the gutter.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </>
    );
}
